<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/webjars/echarts/5.1.1/dist/echarts.js}"></script>
</head>
<body>
    <div id="container" style="width: 800px;height: 500px"></div>

    <script type="text/javascript">
        //1.获取容器dom元素--1分
        const dom = document.getElementById("container");
        //2.实例化echart对象--2分
        const charts = echarts.init(dom);
        //3.在此定义两个数组，用于存储图形所需的数据--3分
        const major = ["计科", "电信", "数电", "计外", "外语", "人文"];
        const count = [130, 80, 35, 88, 160, 90];
        //4.设定配置
        const option = {
            title: {
                //4.1添加标题文本
                text: "XX学校理学院2019级专业人数统计"
            },
            //4.2添加提示组件
            tooltip: {},
            legend: {
                //4.3定义图例的显示内容
                data: ["专业人数"]
            },
            xAxis: {
                //4.4 定义x轴数据
                data: major
            },
            yAxis: {},
            series: [{
                name: '专业人数',
                type: 'bar', //4.5 指定图表的类型
                data: count,//4.6 指定图表的数据
                itemStyle: {
                    normal: {
                        // 随机显示
                        color: function (d) {
                            return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                        }
                    },
                }
            }]
        };
        //5.使用定义好的配置项显示数据
        charts.setOption(option);
        //
        //6.为此图例添加鼠标单击事件
        charts.on('click', function (params) {
            alert("理学院" + params.name + "的人数有【" + params.value + "】人");
        });
    </script>
</body>
</html>